<template>
  <div class="main" ref="aaa">
    <div class="left">
      <div v-for="(item, index) in category" :key="index">
        <div class="items">{{ item }}</div>
        </div>
    </div>
    <div class="right">
      <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="loadMore">
        <home-swiper :banners="banners"/>
        <tab-control :titles="['秒杀', '优惠', '名牌']" @tabClick="tabClick" ref="tabControl2"/>
        <goods-list :goods="showGoods"/>
      </scroll>
      <back-top @click.native="backClick" v-show="isShowBackTop"/>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import HomeSwiper from '../home/childComps/HomeSwiper'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'

import {getHomeMultidata, getAllData} from "network/home"

import Scroll from 'components/common/scroll/Scroll'

import {itemListenerMixin, backTopMixin} from "common/mixin"

export default {
  name: '',
  components: {
    HomeSwiper,
    TabControl,
    GoodsList,
    Scroll
  },
  mixins: [itemListenerMixin, backTopMixin],
  created() {
    this.getMultidata()

    this.getGoods('seckill')
    this.getGoods('discount')
    this.getGoods('famous')
  },
  mounted() {
    
  },
  data() {
    return {
      scroll: null,
      category: ['男装', '女装', '男鞋', '女鞋', '手机数码', '电脑办公', '家用电器', '食品生鲜'],
      banners: [],
      goods: {
        'seckill': {page: 0, list: []},
        'discount': {page: 0, list: []},
        'famous': {page: 0, list: []},
      },
      currentType: 'seckill'
    };
  },
  computed:{
    showGoods() {
      return this.goods[this.currentType].list
    }
  },
  watch:{
  },
  methods: {
    getMultidata() {
      getHomeMultidata().then(res => {
      this.banners = res.data.banner.list;
    })
    },
    getGoods(type) {
      getAllData(type).then(res => {
        // console.log(res);
        this.goods[type].list.push(...res.data);

        // 在网络请求完数据以后，再次进行“上拉加载更多”的操作
        this.$refs.scroll.finishPullUp()
    })
    },
    tabClick(index) {
      switch(index) {
        case 0:
          this.currentType = 'seckill'
          break
        case 1:
          this.currentType = 'discount'
          break
        case 2:
          this.currentType = 'famous'
          break
      }
      // 让两个tabControl的currentIndex保持一致
      // this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },
    loadMore() {
      // console.log('上拉加载更多');
      this.getGoods(this.currentType)

      this.$refs.scroll.finishPullUp()
    },
    contentScroll(position) {
      // 1.判断BackTop是否显示
      this.isShowBackTop = (-position.y) > 700

      // 2.决定tabControl是否吸顶（position: fixed）
      // this.isTabFixed = (-position.y) > this.tabOffsetTop
    },
  }
};
</script>

<style scoped>
  .main {
    width: 100%;
    display: flex;
  }
  .left {
    flex: 20%;
    margin-top: 10px;
  }
  .right {
    flex: 80%;
  }
  .content {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 49px;
  }
  .items {
    height: 60px;
    line-height: 60px;
    width: 100%;
    text-align: center;
  }
</style>
